<template>
    <div>
        <van-swipe :autoplay="3000" :width="375" :height="200" >
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image.banner_img_url"/>
            </van-swipe-item>
        </van-swipe>
        
        <van-icon name="cart-circle" size='50px' class='cart' @click='map' />
        
        <ul class='list'>
            <li>
               <van-icon name="bag" size='24px'/>
               <a href="http://localhost:8080/#/fs">运动服饰</a>
            </li>
            <li>
                <van-icon name="new" size='24px' />
                <a href="http://localhost:8080/#/zb">运动装备</a>
                
            </li>
            <li>
                <van-icon name="youzan-shield" size='24px'/>
                <a href="http://localhost:8080/#/sw">健康食品</a>
            </li>
        </ul>
        <div class="shadow"></div>
        <van-cell title="精选好货"  is-link />
        <div class="swiper-container">
            <swiper :options="swiperOption" ref="mySwiper" >
                <!-- slides -->
                <swiper-slide id='slide1' v-for='item in images'>
                  <van-image
                    width="220"
                    height="107"
                    :src="item.banner_img_url"
                    @click='rap(item.banner_id)'
                    />
                </swiper-slide>
            </swiper>
        </div>
        <van-cell title="热门推荐" />
        <ul class='list1'>
            <li v-for='item in list'>
                <van-row>
                <van-col span="8" offset="1">
                     <van-image
                        width="170"
                        height="170"
                        :src="item.pimg"
                        class='img'
                        @click='tap(item.pid)'
                    />
                </van-col>
                </van-row>
                <van-row>
                <van-col span="24" offset="1">
                    <span>{{item.pname}}</span>
                </van-col>
                </van-row>
                <van-row>
                <van-col span="24" offset="1">
                   <span>￥{{item.pprice}}</span>
                </van-col>
                </van-row>
            </li> 
        </ul>
        <div class="shadow"></div>

        <van-cell title="运动服饰"  value="更多" url="http://localhost:8080/#/fs" />
        <ul class='list1'>
            <li v-for='item in list'>
                <van-row>
                <van-col span="8" offset="1">
                     <van-image
                        width="170"
                        height="170"
                        :src="item.pimg"
                        class='img'
                    />
                </van-col>
                </van-row>
                <van-row>
                <van-col span="24" offset="1">
                   <span>{{item.pname}}</span>
                </van-col>
                </van-row>
                <van-row>
                <van-col span="24" offset="1">
                   <span>￥{{item.pprice}}</span>
                </van-col>
                </van-row>
            </li> 
        </ul>
        <div class="shadow"></div>

        <van-cell  title="运动装备" value="更多" url="http://localhost:8080/#/zb" />
        <ul class='list1'>
            <li v-for='item in list'>
                <van-row>
                <van-col span="8" offset="1">
                     <van-image
                        width="170"
                        height="170"
                        :src="item.pimg"
                        class='img'
                    />
                </van-col>
                </van-row>
                <van-row>
                <van-col span="24" offset="1">
                   <span>{{item.pname}}</span>
                </van-col>
                </van-row>
                <van-row>
                <van-col span="24" offset="1">
                   <span>￥{{item.pprice}}</span>
                </van-col>
                </van-row>
            </li> 
        </ul>
        <div class="shadow"></div>

        <van-cell  title="健康食品" value="更多" url="http://localhost:8080/#/sw" />
        <ul class='list1'>
            <li v-for='item in list'>
                <van-row>
                <van-col span="8" offset="1">
                     <van-image
                        width="170"
                        height="170"
                        :src="item.pimg"
                        class='img'
                    />
                </van-col>
                </van-row>
                <van-row>
                <van-col span="24" offset="1">
                   <span>{{item.pname}}</span>
                </van-col>
                </van-row>
                <van-row>
                <van-col span="24" offset="1">
                   <span>￥{{item.pprice}}</span>
                </van-col>
                </van-row>
            </li> 
        </ul>
        <div class="shadow1"></div>
    </div>
</template>

<script>
  import '../../node_modules/swiper/dist/css/swiper.css'
  import axios from 'axios'

  export default {
    name:'Sc',
    data () {
        return {
                images: [],
                swiperOption: {
                notNextTick: true,
                direction : 'horizontal',
                freeMode : true,
                freeModeMomentum : false,
                slidesPerView :'auto'

                },
                imageURL: 'https://img.yzcdn.cn/2.jpg',
                list:[],
                index:1,
        }
    },
    mounted () {
        var _this=this
        axios({
            method:'get',
            url:'http://jx.xuzhixiang.top/ap/api/bannerlist.php',
            params:{uid:11003},
        }).then((res)=>{
            _this.images=res.data.data
            console.log(res.data.data)
        })
        axios({
            method:'get',
            url:'http://jx.xuzhixiang.top/ap/api/productlist.php',
            params:{uid:11003}
        }).then((res)=>{
            _this.list=res.data.data
            console.log(res.data.data)
        })
         
    },
    methods: {
        map(){
            this.$router.push('/cart')
        },
        rap(id){
            this.$router.push('/detail/'+id)
        },
        tap(id){
             this.$router.push('/detail/'+id)
        }
    }
}
</script>

<style scoped>
.cart{
    position:fixed;
    left:313px;
    top:554px;
    z-index: 10;
}
#slide1{
      width:220px!important;
      height:107px;
      margin-right: 8px
}
 .list{
    width:375px;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items:center;
    min-height: 100%
}
.list li{
    width:53px;
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items:center;
    font-size:12px
}
.list li a{
    color:black;
}
.shadow{
    width: 375px;
    height: 20px;
    line-height: 20px;
    background-color: rgba(238, 238, 238, 1);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0);
  }
  .shadow1{
    width: 375px;
    height: 20px;
    line-height: 20px;
    background-color: rgba(238, 238, 238, 1);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0);
    margin-bottom: 50px;
  }
.list1{
    width:370px;
    height:450px;
    margin-left:2px;
}
.list1 li{
    float: left;
    margin-right: 15px;
}


</style>
